import Dialog from "@mui/material/Dialog";

import "./index.scss";

const Lineup = (props: any) => {
  const { onClose, selectedValue, open } = props;

  const handleClose = () => {
    onClose(selectedValue);
  };

  return (
    <Dialog maxWidth="xs" onClose={handleClose} open={open}>
      <div className="lineup-dialog">
        <div className="title-box">
          <span className="name">快乐家族</span>
          <div className="close-btn" onClick={handleClose}>
            <img src="/images/close_x.png" />
          </div>
        </div>
        <div className="content-box">
          <div className="hero-show">
            <div className="attribute">
              <div className="item">伤害：100</div>
              <div className="item">力气：400</div>
            </div>
            <img className="hero" src="/images/heros.png" />
          </div>
          <div className="skill-introduce">
            <div className="skill-box">
              <img src="/images/skill_icon.png" alt="" />
            </div>
            <div className="introduce-box">
              <div className="name">双倍暴击</div>
              <div className="desc">抵达终点有概念造成更多伤害</div>
            </div>
          </div>
          <div className="btns-box">
            <button className="btn" onClick={handleClose}>
              全套上阵
            </button>
          </div>
        </div>
      </div>
    </Dialog>
  );
};

export default Lineup;
